<template>
	<view>
		<tt-bar title="提现" leftIcon="icon-back">

		</tt-bar>
		<view class="reflectProgress">
			<view class="row">
				<view class="pointBox">
					<view class="poiot"></view>
					<view class="line"></view>
				</view>
				<text>发起提现申请</text>
			</view>
			<view class="row" :class="[status==0?'active':'']">
				<view class="pointBox">
					<view class="poiot">

					</view>
					<view class="line"></view>
				</view>
				<text>提现申请审核中，请耐心等待</text>
			</view>
			<view class="row " :class="[status==1?'active':'no']">
				<view class="pointBox">
					<view class="poiot"></view>
				</view>
				<text>审核通过</text>
			</view>
		</view>

		<view class="reflectInfo">
			<view class="row">
				<text class="reflectLabel">提现金额</text>
				<text class="reflectValue">￥{{count.toFixed(2)}}</text>
			</view>
			<view class="row">
				<text class="reflectLabel">申请时间</text>
				<text class="reflectValue">{{time}}</text>
			</view>
			<view class="row">
				<text class="reflectLabel">到账银行卡</text>
				<text class="reflectValue">{{bank_name}} 尾号{{bank_no.substr(-4)}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import API from "@/common/api.js";
	import {mapState} from "vuex";
	export default {
		components: {
			ttBar
		},
		data() {
			return {
				count:0,
				time:'',
				status:0,
				bank_name:'',
				bank_no:'',
				id:0
			};
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
				selectShop:state=>state.shop.selectShop,
			})
			
		},
		methods:{
			getData(){
				API.getReflectDetail(this.id).then(res=>{
					this.count=res.data.data.amount;
					this.time=res.data.data.create_time;
					this.status=res.data.data.status
				})
				API.getAssetInfoBySid(this.userInfo.userId).then(info=>{
					this.bank_name=info.data.data.bank_name,
					this.bank_no=info.data.data.bank_no
				})
			}
		},
		
		onLoad(cfm) {
			this.id=cfm.id
			this.getData()
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.reflectProgress {
		background-color: #ffffff;
		border-radius: 21rpx;
		margin: 26upx;
		display: flex;
		flex-direction: column;
		padding: 60upx 50upx;

		.row {
			display: flex;

			.pointBox {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 50upx;

				.poiot {
					width: 28upx;
					height: 28upx;
					border-radius: 50%;
					background-color: #ffb423;
					display: flex;
					align-items: center;
					justify-content: center;

				}

				.line {
					border-left: 3upx dashed #ffb423;
					height: 160upx;
					width: 3upx;
				}
			}

			text {
				margin-top: -10upx;
				font-size: 35upx;
				color: #8c8c8c
			}
		}

		.active {
			.pointBox {
				.poiot {
					transform: scale(1.5, 1.5);
				}

				.line {
					border-left: 3upx dashed #d2d2d2;
				}
			}

			text {
				color: #07080d;
			}

		}

		.no {
			.pointBox {
				.poiot {
					background-color: #d2d2d2;
				}

			}
		}
	}

	.reflectInfo {
		background-color: #ffffff;
		border-radius: 21rpx;
		margin: 26upx;
		display: flex;
		flex-direction: column;
		padding: 50upx 50upx 0 50upx;

		.row {
			display: flex;
			margin-bottom: 50upx;
			justify-content: space-between;
			.reflectLabel {
				font-size: 28rpx;
				color: #a0a0aa;
			}
			.reflectValue{
				font-size: 28rpx;
				color: #07080d;
			}
		}
	}
</style>
